<template>
	<view class="dati-body__group">
		<globalCard>
			<view class="q__item">
				{{nowQ.qtitle}}
			</view>

			<view class="a__group">
				<template v-for="(temp,index) in [1,2,3,4]">

					<template v-if="nowQ[`ans${temp}`]">

						<view :class="['a__item', {active:checked==temp}, {right:right==temp} ]" :key="index">

							{{temp|miva}}. &nbsp; {{nowQ[`ans${temp}`]}}

						</view>

					</template>

				</template>
			</view>
			<view class="right__item">
				答案: {{nowQ.right|miva}}
			</view>
			<!--<view class="biaozhu-btn__item">
				我要标注
			</view> -->
		</globalCard>

	</view>
</template>

<script>
	export default {
		filters: {
			miva(str) {
				const arr = [, 'A', 'B', 'C', 'D']
				return arr[str];
			}
		},
		props: {
			nowQ: {
				type: Object,
				required: true
			},
			checked: {
				type: [Number, String],
				required: true,
			}
		},
		computed: {
			right() {
				return this.nowQ.right;
			}
		},
		methods: {
			aItemClickHandler(index) {
				this.checked = index;
				this.$emit('change', index);
			}
		}
	}
</script>

<style lang="scss">
	.dati-body__group {
		padding: 20px;

		.q__item {
			font-weight: bold;
			margin-bottom: 20px;
		}

		.a__item {
			margin-bottom: 10px;
			padding: 5px 30px;
			border-radius: 4px;
			background-color: #F1F1F1;
			display: flex;
			align-items: center;
		}

		.active {
			background-color: #F79E98;

		}

		.right__item {
			margin-bottom: 10px;
			font-size: 14px;
		}

		.biaozhu-btn__item {
			font-size: 12px;
			text-align: center;
			border-top: 1px dotted;
			padding-top: 10px;
			color: #666;
		}

		.right {
			background-color: #9AF7B1;
		}
	}
</style>
